<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            user-select: none;
        }

        .starArea {
            width: 100vw;
            height: 100vh;
            position: fixed;
            background-image: linear-gradient(to bottom, #1b2947, #2b3152, #3b385d, #4c4067, #5d4771);
            z-index: -99;
        }

        .moon {
            position: absolute;
            top: 20px;
            right: 40px;
            width: 60px;
            height: 60px;
            background-color: #ffeaa7;
            border-radius: 50%;
            box-shadow: 0 0 20px #ffeaa7;
        }

        .star {
            position: absolute;
            width: 0;
            height: 0;
            opacity: 0.2;
            border: 2px solid transparent;
            border-bottom: 4px solid #fff;
            animation: blingbling 1s linear infinite;
        }

        .star::before {
            content: "";
            position: absolute;
            top: 4px;
            left: -2px;
            border: 2px solid transparent;
            border-top: 4px solid #fff;
        }

        @keyframes blingbling {
            20% {
                opacity: 0.2;
            }

            40% {
                opacity: 0.5;
            }

            60% {
                opacity: 1;
            }

            80% {
                opacity: 0.5;
            }

            100% {
                opacity: 0.2;
            }
        }

        .entrance {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: space-between;
            background: rgba(0, 0, 0, 0.6);
            /* 背景 */
            max-width: 550px;
            /* 最大宽度 */
            width: 100%;
            padding: 15px;
            border-radius: 5px;
            /* 边框圆角 */
        }

        .entrance .input-title {
            position: absolute;
            top: -50px;
            left: 5px;
            font-size: 20px;
            color: aliceblue;
            display: flex;
        }

        .entrance .input-title span {
            margin-right: 5px;
            animation: jump 2.5s infinite;
            animation-delay: calc(var(--i)*0.1s);
        }

        .entrance input {
            font-weight: 400;
            font-size: 20px;
            color: rgb(236, 120, 140);
            width: 77%;
            padding: 15px 20px;
            border: none;
            border-radius: 5px;
            font-weight: bold;
            /* 字体粗度 */
            outline: none;
        }

        .entrance .button {
            background: #ffec00;
            width: 15%;
            border-radius: 5px;
            position: relative;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all .5s;
        }

        .entrance .button a {
            text-decoration: none;
            color: #000;
        }

        .entrance div:hover {
            opacity: 0.9;
        }

        .photo {
            z-index: -1;
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .photo div {
            width: 400px;
            height: 400px;
        }

        .photo div img {
            width: 100%;
            height: 100%;
        }

        .lovetime {
            position: absolute;
            font-size: 60px;
            left: 50%;
            top: 0;
            transform: translate(-50%, 25%);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .lovetime .time-text {
            font-weight: 500;
            letter-spacing: 10px;
            font-family: serif;
            font-size: 50px;
            margin-bottom: 20px;
        }

        .lovetime .forever {
            color: aliceblue;
        }

        .lovetime .forever span {
            margin: 0 10px;
            font-size: 20px;
            color: #ffec00;
        }

        @keyframes jump {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-15px);
            }

            100% {
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="starArea">
        <div class="moon"></div>
    </div>
    <div class="lovetime">
        <div class="time-text">在一起已经</div>
        <div class="forever">love</div>
    </div>
    <div class="entrance">
        <div class="input-title">
            <span style="--i:1">输</span>
            <span style="--i:2">入</span>
            <span style="--i:3">w</span>
            <span style="--i:3">c</span>
            <span style="--i:3">b</span>
            <span style="--i:4">l</span>
            <span style="--i:4">z</span>
            <span style="--i:4">j</span>
            <span style="--i:5">2</span>
            <span style="--i:5">0</span>
            <span style="--i:5">2</span>
            <span style="--i:5">2</span>
            <span style="--i:6">0</span>
            <span style="--i:6">2</span>
            <span style="--i:7">1</span>
            <span style="--i:7">7</span>
            <span style="--i:8">，</span>
            <span style="--i:9">进</span>
            <span style="--i:10">入</span>
            <span style="--i:11">专</span>
            <span style="--i:12">属</span>
            <span style="--i:13">空</span>
            <span style="--i:14">间</span>
            <span style="--i:15">~</span>
        </div>
        <input id="input" type="text" value="">
        <div id="button" class="button"><a>💕</a></div>
    </div>
    <div class="photo">
        <div><img src="./image/wcb.png" alt=""></div>
        <div><img src="./image/lzj.png" alt=""></div>
    </div>
    <audio id="bgmusic" autoplay="autoplay" >
        <source src="./music/慕云清阳-hea2t - 温柔的好天气总是和你一样，止不住的让人心动.mp3" type="audio/mpeg" />
    </audio>
    <script src="./music.js"></script>
    <script type="text/javascript">
        //星星初始化
        function starInit(starCount) {
            const starArea = document.querySelector(".starArea");
            for (let i = 0; i < starCount; i++) {
                const star = document.createElement("div");
                star.classList.add("star");
                starArea.appendChild(star);
            }
        }
        // starInit();
        //星星位置
        function starPosition(starCount) {
            starInit(starCount);
            const stars = document.querySelectorAll(".star");
            console.log(stars);
            for (let i = 0; i < starCount; i++) {
                let left = Math.floor(Math.random() * window.innerWidth);
                let top = Math.floor(Math.random() * window.innerHeight / 1.5);
                stars[i].style.left = left + 'px';
                stars[i].style.top = top + 'px';
                stars[i].style.animationDelay = Math.floor(Math.random().toFixed(1) * i) + 's';
            }
        }
        starPosition(100);
        //在一起的时间
        function countDown(inputTime) {
            //获取从1970年1月1日到现在的时间的毫秒数
            var nowTime = +new Date();
            //获取输入时间的毫秒数
            var putTime = +new Date(inputTime);
            //剩余时间总的毫秒数 除以 1000 变为总秒数
            var dec = (nowTime - putTime) / 1000;
            //得到天 格式化成前缀加零的样式
            var d = parseInt(dec / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            //得到小时 格式化成前缀加零的样式
            var h = parseInt(dec / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            //得到分钟 格式化成前缀加零的样式
            var m = parseInt(dec / 60 % 60);
            m = m < 10 ? '0' + m : m;

            //得到秒 格式化成前缀加零的样式
            s = parseInt(dec % 60);
            s = s < 10 ? '0' + s : s;
            let forever = document.querySelectorAll(".forever")[0]
            forever.innerHTML = `${d}<span>天</span>${h}<span>时</span>${m}<span>分</span>${s}<span>秒</span>`;
        }
        // 计时
        setInterval(() => {
            countDown(new Date('2022-02-17 03:12:00').getTime())
        }, 1000)

        //判断跳转
        let loveButton = document.getElementById('button')
        let loveInput = document.getElementById('input')
        let loveStr = "wcblzj20220217"
        loveButton.addEventListener('click', function () {
            if (loveInput.value == loveStr) {
                location.href = "./love.html"
            } else if(loveInput.value==""){
                alert("别调皮，先输入~")
            } else{
                alert("输入错误~ 笨死了！")
            }
        })
    </script>
</body>

</html>